<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <style>
      .load_title{
        font-family:'Open Sans';
        color:#ccc;
        font-size:13px;
        width:100%;
        text-align:center;
        z-index:9999999999999;
        position:absolute;
        top:60%;
        opacity:1;
        line-height:30px;
      }
      .load_title span{
        font-weight:normal;
        font-style:italic;
        font-size:13px;
        color:#FFF;
        opacity:0.5;}
      .sampleContainer{
        position:fixed;
        top:50%;
        left:50%;
        -webkit-transform:translateX(-50%) translateY(-50%);
        width:100%;
        height:100px
      }
      .loader{
        position:relative;
        width:44px;
        height:8px;
        margin:12px auto
      }
      .dot{
        display:inline-block;
        width:8px;
        height:8px;
        border-radius:4px;
        background:#ccc;
        position:absolute
      }
      .dot_1{
        animation:animateDot1 1.5s linear infinite;
        left:12px;
        background:#e579b8
      }
      .dot_2{
        animation:animateDot2 1.5s linear infinite;
        animation-delay:.5s;
        left:24px
      }
      .dot_3{
        animation:animateDot3 1.5s linear infinite;
        left:12px
      }
      .dot_4{
        animation:animateDot4 1.5s linear infinite;
        animation-delay:.5s;
        left:24px
      }
      @keyframes animateDot1{
        0%{transform:rotate(0) translateX(-12px)}
        25%{transform:rotate(180deg) translateX(-12px)}
        75%{transform:rotate(180deg) translateX(-12px)}
        100%{transform:rotate(360deg) translateX(-12px)}
      }
      @keyframes animateDot2{
        0%{transform:rotate(0) translateX(-12px)}
        25%{transform:rotate(-180deg) translateX(-12px)}
        75%{transform:rotate(-180deg) translateX(-12px)}
        100%{transform:rotate(-360deg) translateX(-12px)}
      }
      @keyframes animateDot3{
        0%{transform:rotate(0) translateX(12px)}
        25%{transform:rotate(180deg) translateX(12px)}
        75%{transform:rotate(180deg) translateX(12px)}
        100%{transform:rotate(360deg) translateX(12px)}
      }
      @keyframes animateDot4{
        0%{transform:rotate(0) translateX(12px)}
        25%{transform:rotate(-180deg) translateX(12px)}
        75%{transform:rotate(-180deg) translateX(12px)}
        100%{transform:rotate(-360deg) translateX(12px)}
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but blog-oms-fe doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <div class="sampleContainer">
        <div class="loader">
          <span class="dot dot_1"></span>
          <span class="dot dot_2"></span>
          <span class="dot dot_3"></span>
          <span class="dot dot_4"></span>
        </div>
        <div class="load_title">正在加载系统资源，请耐心等待...</div>
      </div>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>
